<template>
  <div class="checkbox">
    <van-field name="checkboxGroup" :label="element.label" :required="element.required" :disabled="element.disabled">
      <template #input>
        <van-checkbox-group v-model="checkboxData" direction="horizontal" @change="change">
          <van-checkbox shape="square" v-for="item in optionsList" :key="item.value" :name="item.value">{{item.label}}</van-checkbox>
        </van-checkbox-group>
      </template>
    </van-field>
  </div>
</template>


<script>
import { mapMutations } from 'vuex'
export default {
  name: 'checkbox',
  inject: ['element'],
  data() {
    return {
      checkbox: false,
      checkboxData: []
    }
  },
  watch: {
    vModel(val) {
      // 去除为空的
      const data = val.split(',')
      this.checkboxData = val === '' ? [] : data
    }
  },
  computed: {
    formId() {
      return this.element.formId
    },
    vModel() {
      return this.element.vModel
    },
    optionsList() {
      return this.element.optionsSource === '0' ? this.element.options : this.element.urlData.urlOptions
    }
  },
  methods: {
    ...mapMutations('pageData', ['SETVMODEL']),
    change(val) {
      const value = JSON.stringify(val) === "[]" ? '' : val.join(',')
      this.SETVMODEL({
        value,
        formId: this.formId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell:last-child::after {
  display: block;
}
</style>